import { Component, OnInit } from '@angular/core';
import * as AMapLoader from '@amap/amap-jsapi-loader';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor() { }

  map: any;

  ngOnInit(): void {
    this.createMap();
  }

  /**
 * 创建地图
 */
  createMap() {
    AMapLoader.load({
      "key": "6027cc22082e43c4862d5466bb343740",              // 申请好的Web端开发者Key，首次调用 load 时必填
      "version": "1.4.15",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      "plugins": [],          // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      "AMapUI": {             // 是否加载 AMapUI，缺省不加载
        "version": '1.1',   // AMapUI 缺省 1.1
        "plugins": [],       // 需要加载的 AMapUI ui插件
      },
      "Loca": {                // 是否加载 Loca， 缺省不加载
        "version": '1.3.2'  // Loca 版本，缺省 1.3.2
      },
    }).then((AMap) => {
      this.map = new AMap.Map('Mapcontainer', {
        pitch: 60, // 地图俯仰角度，有效范围 0 度- 83 度
        viewMode: '3D' // 地图模式
      });
      this.map.setMapStyle('amap://styles/fresh');

      var marker1 = new AMap.Marker({
        position: new AMap.LngLat(116.39, 28.9),
        offset: new AMap.Pixel(-10, -10),
        icon: '//vdata.amap.com/icons/b18/1/2.png', // 添加 Icon 图标 URL
        title: '北京'
      });

      var content = '<div class="marker-route marker-marker-bus-from" style="line-height:14px;">我是内容标点</div>';

      var marker2 = new AMap.Marker({
        content: content,  // 自定义点标记覆盖物内容
        position: [116.397428, 30.0], // 基点位置
        offset: new AMap.Pixel(-17, -42) // 相对于基点的偏移位置
      });

      // 创建 AMap.Icon 实例：
      var icon = new AMap.Icon({
        size: new AMap.Size(40, 50),    // 图标尺寸
        image: '//webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png',  // Icon的图像
        imageOffset: new AMap.Pixel(0, -60),  // 图像相对展示区域的偏移量，适于雪碧图等
        imageSize: new AMap.Size(40, 50)   // 根据所设置的大小拉伸或压缩图片
      });

      // 将 Icon 实例添加到 marker 上:
      var marker3 = new AMap.Marker({
        position: new AMap.LngLat(116.405467, 32.907761),
        offset: new AMap.Pixel(-10, -10),
        icon: icon, // 添加 Icon 实例
        title: '北京',
        zoom: 13
      });

      var markerList = [marker1, marker2, marker3];

      this.map.add(markerList);

    }).catch(e => {
      console.log(e);
    })
  }

}
